<template>
  <div>
    <Header :path="'index'" />
    <Right />
    <div class="home">
      <!-- 轮播图 -->
      <div class="swiper">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in 4" :key="index">
            <img src="../../assets/img/banner.png" alt class="swiper_img" />
          </van-swipe-item>
        </van-swipe>
        <!-- 搜索框 -->
        <van-search
          class="search"
          show-action
          v-model="value"
          placeholder="区域/小区/商圈/关键字"
          input-align="center"
        >
          <template #action>
            <div @click="onSearch" class="search_btn">搜索</div>
          </template>
        </van-search>
      </div>
      <!-- 列表 -->
      <ul class="head_list">
        <router-link :to="{ path: '/all_home' }" tag="li">
          <img src="../../assets/image/qbfc.png" alt />
          <p>全部房产</p>
        </router-link>
        <router-link :to="{ path: '/m_map' }" tag="li">
          <img src="../../assets/image/dtzf.png" alt />
          <p>地图找房</p>
        </router-link>
        <router-link :to="{ path: '/mloan' }" tag="li">
          <img src="../../assets/image/fpdk.png" alt />
          <p>法拍贷款</p>
        </router-link>
        <router-link :to="{ path: '/m_broker' }" tag="li">
          <img src="../../assets/image/fpjl.png" alt style="height:.27rem;width:.13rem" />
          <p>法拍经理</p>
        </router-link>
      </ul>
      <p class="lion"></p>
      <!-- 本周好房 -->
      <div class="week_home">
        <div class="week_head">
          <p class="title">本周好房</p>
          <p class="subscribe" @click="Onsubscribe">免费订阅</p>
        </div>
        <van-tabs v-model="active" title-active-color="#F5643E" line-width=".95rem">
          <van-tab title="本周上新" title-style="font-size:.14rem">
            <van-swipe :autoplay="3000" indicator-color="#F5643E">
              <van-swipe-item>
                <div class="home_swiper">
                  <div
                    class="home_list"
                    v-for="(item, index) in weekList"
                    :key="index"
                    @click="Ondetails(item.id)"
                  >
                    <img v-if="item.img" :src="item.img[0]" alt />
                    <p
                      class="state"
                      :class="[item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed']"
                    >{{ item.sellStage }}</p>
                    <p class="home_name">{{ item.title }}</p>
                    <p class="home_num">
                      {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅
                      <span
                        v-if="item.coveredArea"
                      >·{{ item.coveredArea }}㎡</span>
                    </p>
                    <p class="home_money">
                      {{ item.startSalePrice }}万
                      <span style="font-size:0.11rem">起拍</span>
                    </p>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
          <van-tab title="本周开拍" title-style="font-size:.14rem">
            <van-swipe :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <div class="home_swiper">
                  <div
                    class="home_list"
                    v-for="(item, index) in  SellHouseList"
                    :key="index"
                    @click="Ondetails(item.id)"
                  >
                    <p
                      class="state"
                      :class="[item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed']"
                    >{{ item.sellStage }}</p>
                    <img v-if="item.img" :src="item.img[0]" alt />
                    <p class="home_name">{{ item.title }}</p>
                    <p class="home_num">
                      {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅
                      <span
                        v-if="item.coveredArea"
                      >·{{ item.coveredArea }}㎡</span>
                    </p>
                    <p class="home_money">
                      {{ item.startSalePrice }}万
                      <span style="font-size:0.11rem">起拍</span>
                    </p>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
          <van-tab title="本周特惠" title-style="font-size:.14rem">
            <van-swipe :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <div class="home_swiper">
                  <div
                    class="home_list"
                    v-for="(item, index) in CheapHouseList"
                    :key="index"
                    @click="Ondetails(item.id)"
                  >
                    <p
                      class="state"
                      :class="[item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed']"
                    >{{ item.sellStage }}</p>
                    <img v-if="item.img" :src="item.img[0]" alt />
                    <p class="home_name">{{ item.title }}</p>
                    <p class="home_num">
                      {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅
                      <span
                        v-if="item.coveredArea"
                      >·{{ item.coveredArea }}㎡</span>
                    </p>
                    <p class="home_money">
                      {{ item.startSalePrice }}万
                      <span style="font-size:0.11rem">起拍</span>
                    </p>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 一站式服务 -->
      <div class="service">
        <p class="service_title">一站式服务</p>
        <div class="service_box">
          <div
            class="service_list"
            v-for="(item, index) in oneStopList"
            :key="index"
            @click="Onstap(item.id)"
          >
            <p class="list_num">{{ item.id }}</p>
            <div class="list_img">
              <img :src="item.img" alt />
            </div>
            <p class="list-line">
              <img src="../../assets/image/lion.png" alt />
            </p>

            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
      <img src="../../assets/image/zfgg1.png" alt class="advert" />
      <!-- 自由购 -->
      <div>
        <div class="purchase">
          <img src="../../assets/image/zyg.png" alt class="free just" />
          <router-link :to="{ path: '/all_home' }" tag="p" class="more">更多 ></router-link>
        </div>
      </div>

      <List :title="'自由购'" :list="purchList" />
      <p class="lion"></p>
      <!-- 刚需捡漏 -->
      <div>
        <div class="purchase">
          <img src="../../assets/image/gxjl.png" alt class="free just" />
          <router-link :to="{ path: '/all_home' }" tag="p" class="more">更多 ></router-link>
        </div>
        <List :title="'刚需捡漏'" v-bind:list="byHouseList" />
      </div>
      <p class="lion"></p>
      <!-- 金融贷款 -->
      <div class="loan">
        <p class="service_title">金融贷款</p>
        <van-swipe class="swipe" :autoplay="3000" indicator-color="#F5643E">
          <van-swipe-item v-for="(item, index) in 1" :key="index" class="loan_img">
            <img src="../../assets/image/t1.png" alt class="swiper_img" />
            <img src="../../assets/image/t2.png" alt class="swiper_img" />
            <img src="../../assets/image/t3.png" alt class="swiper_img" />
            <img src="../../assets/image/t4.png" alt class="swiper_img" />
            <img src="../../assets/image/t5.png" alt class="swiper_img" />
            <img src="../../assets/image/t6.png" alt class="swiper_img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 法务权证 -->
      <div class="affairs">
        <p class="service_title">法务权证</p>
        <ul>
          <li v-for="(item, index) in methodList" :key="index" class="affairs_box">
            <div class="affairs_left" :class="`affairs_color${index}`">
              <img :class="[item.title == '物权交付岗' ? 'img_W' : 'img_h']" :src="item.img" alt />
              <p>{{ item.title }}</p>
            </div>
            <p class="affairs_right">{{ item.text }}</p>
          </li>
        </ul>
      </div>
      <!-- 全程服务 -->
      <div class="course">
        <p class="service_title">全程服务</p>
        <van-tabs v-model="active" title-active-color="#F5643E" line-width=".95rem">
          <van-tab title="拍卖前" title-style="font-size:.14rem">
            <div class="tab_conter">
              <div
                v-for="(item, index) in tabcardOne"
                :key="index"
                class="card"
                v-on:mouseover="changeActive($event)"
                v-on:mouseout="removeActive($event)"
              >
                <p class="title">
                  <img class="image" :src="item.img" alt />
                  {{ item.title }}
                </p>
                <p class="conter">{{ item.text }}</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="拍卖中" title-style="font-size:.14rem">
            <div class="tab_conter">
              <div
                v-for="(item, index) in tabcardTwo"
                :key="index"
                class="card"
                v-on:mouseover="changeActive($event)"
                v-on:mouseout="removeActive($event)"
              >
                <p class="title">
                  <img class="image" :src="item.img" alt />
                  {{ item.title }}
                </p>
                <p class="conter">{{ item.text }}</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="拍卖后" title-style="font-size:.14rem">
            <div class="tab_conter">
              <div
                v-for="(item, index) in tabcardThree"
                :key="index"
                class="card"
                v-on:mouseover="changeActive($event)"
                v-on:mouseout="removeActive($event)"
              >
                <p class="title">
                  <img class="image" :src="item.img" alt />
                  {{ item.title }}
                </p>
                <p class="conter">{{ item.text }}</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import List from "@/components/m_file/list.vue";
import Right from "@/components/m_file/right.vue";
export default {
  data() {
    return {
      value: "",
      active: "",
      sms: "",
      oneStopList: [
        {
          id: "1",
          img: require(`@/assets/img/derstand.png`),
          unimg: require(`@/assets/img/understand.png`),
          text: "咨询与了解"
        },
        {
          id: "2",
          img: require(`@/assets/img/unentrust.png`),
          unimg: require(`@/assets/img/entrust.png`),
          text: "方案与委托"
        },
        {
          id: "3",
          img: require(`@/assets/img/unindeed.png`),
          unimg: require(`@/assets/img/indeed.png`),
          text: "看房与尽调"
        },
        {
          id: "4",
          img: require(`@/assets/img/unbond.png`),
          unimg: require(`@/assets/img/bond.png`),
          text: "缴纳保证金"
        },
        {
          id: "5",
          img: require(`@/assets/img/unoffer.png`),
          unimg: require(`@/assets/img/offer.png`),
          text: "竞拍与出价"
        },
        {
          id: "6",
          img: require(`@/assets/img/unassist.png`),
          unimg: require(`@/assets/img/assist.png`),
          text: "贷款与抵押"
        },
        {
          id: "7",
          img: require(`@/assets/img/unauction.png`),
          unimg: require(`@/assets/img/auction.png`),
          text: "物业与权属"
        },
        {
          id: "8",
          img: require(`@/assets/img/untransfer.png`),
          unimg: require(`@/assets/img/transfer.png`),
          text: "腾房与交房"
        }
      ],
      methodList: [
        {
          title: "公证岗",
          text: "负责提供公证服务，全权代办各项手续，为您省时省力",
          img: require(`@/assets/image/gzg.png`)
        },
        {
          title: "法院岗",
          text: "负责法院对接工作，专业律师为您解决法院相关流程",
          img: require(`@/assets/image/fyg.png`)
        },
        {
          title: "法拍金融岗",
          text: "负责金融贷款业务，帮助购房者规避贷款风险",
          img: require(`@/assets/image/fpjrg.png`)
        },
        {
          title: "产权岗",
          text: "负责产权过户，税费缴纳，使得产权交接顺利完成",
          img: require(`@/assets/image/cqg.png`)
        },
        {
          title: "权证法务岗",
          text: "负责后续房产腾退协调、相关变更工作，使购房者顺利入住",
          img: require(`@/assets/image/qzfwg.png`)
        },
        {
          title: "物权交付岗",
          text: "负责法律相关支持，通过丰富的法务经验，控制风险",
          img: require(`@/assets/image/wqjfg.png`)
        }
      ],
      tabcardOne: [
        {
          img: require(`@/assets/img/pqzx.png`),
          text: "1v1全程解答拍房流程 制定选房方案",
          title: "拍前咨询"
        },
        {
          img: require(`@/assets/img/sdkc.png`),
          text: "满足客户需求的房源 可实地带委托人看房",
          title: "实地勘查"
        },
        {
          img: require(`@/assets/img/lsjd.png`),
          text: "查验资产瑕疵、欠费情况 评估房源拍卖风险",
          title: "律师尽调"
        },
        {
          img: require(`@/assets/img/sfcs.png`),
          text: "免费评估房产价值 核算各类费用",
          title: "税费测算"
        }
      ],
      tabcardTwo: [
        {
          img: require(`@/assets/img/jpdy.png`),
          text: "遇到任何竞拍问题随时提供答疑服务 及时反馈委托人",
          title: "竞拍答疑"
        },
        {
          img: require(`@/assets/img/cpzd.png`),
          text: "全程参与拍卖，现场出价指导 竞价风险控制",
          title: "参拍指导"
        },
        {
          img: require(`@/assets/img/jjkz.png`),
          text: "拍卖过程中提供安全价格建议 规避拍卖风险",
          title: "竞价控制"
        },
        {
          img: require(`@/assets/img/dkbj.png`),
          text: "多家银行金融机构合作 解决客户购房资金问题",
          title: "贷款白金"
        }
      ],
      tabcardThree: [
        {
          img: require(`@/assets/img/cdws.png`),
          text: "协助委托人领取裁定文书 提供专业咨询",
          title: "裁定文书"
        },
        {
          img: require(`@/assets/img/cqgh.png`),
          text: "可享受3到12个月过户无忧保证 未达成则按市场价格赔付租金",
          title: "产权过户"
        },
        {
          img: require(`@/assets/img/fwjg.png`),
          text: "专业腾退团队，保证按时交付 未按期交付可回购",
          title: "房屋交付"
        },
        {
          img: require(`@/assets/img/axrz.png`),
          text: "入住2年内如遇侵扰，可提供免费支持",
          title: "安心入住"
        }
      ],
      weekList: [],
      CheapHouseList: [],
      SellHouseList: [],
      purchList: [],
      byHouseList: []
    };
  },
  mounted() {
    this.Onweek(),
      this.OnSellHouse(),
      this.OnCheapHouse(),
      this.OnFreedomBuy(),
      this.OnCheapbyHouse();
  },
  methods: {
    Onsubscribe() {
      this.$router.push({
        name: "Subscribe"
      });
    },
    Ondetails(item) {
      this.$router.push({ name: "MDetails", query: { id: item } });
    },
    Onstap(val) {
      this.oneStop = val;
      this.$router.push({ path: `/m_stop?#tab${val}` });
    },
    onSearch() {
      this.$router.push({
        name: "AllHome",
        params: { title: this.value }
      });
    },
    Onweek(val) {
      this.instance
        .NewHouse({
          page: 1,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.weekList = res.data.data;
          this.weekList.forEach((item, index) => {
            item.img = item.imgUrl.split(",");
          });
        })
        .catch(function(error) {});
    },
    OnSellHouse() {
      this.instance
        .SellHouse({
          page: 1,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.SellHouseList = res.data.data;
          this.SellHouseList.forEach((item, index) => {
            item.img = item.imgUrl.split(",");
          });
        })
        .catch(function(error) {});
    },
    OnCheapHouse() {
      this.instance
        .CheapHouse({
          page: 1,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.CheapHouseList = res.data.data;
          this.CheapHouseList.forEach((item, index) => {
            item.img = item.imgUrl.split(",");
          });
        })
        .catch(function(error) {});
    },
    OnFreedomBuy() {
      this.instance
        .FreedomBuy({
          page: 1,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.purchList = res.data.data;
          this.purchList.forEach(item => {
            item.img = item.imgUrl.split(",");
          });
          this.total = res.data.count;
        })
        .catch(function(error) {});
    },
    OnCheapbyHouse() {
      this.instance
        .CheapbyHouse({
          page: 1,
          limit: 4,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.byHouseList = res.data.data;
          this.byHouseList.forEach(item => {
            item.img = item.imgUrl.split(",");
          });
          this.total = res.data.count;
        })
        .catch(function(error) {});
    }
  },
  components: {
    Header,
    Footer,
    Right,
    List
  }
};
</script>
<style lang="less" scoped>
.home {
  font-size: 0.11rem;
  .lion {
    width: 100%;
    height: 0.1rem;
    background: #f8f8f8;
  }
  .swiper {
    position: relative;
    .van-swipe {
      height: 1.69rem;
    }
    .my-swipe {
      .swiper_img {
        width: 100%;
        height: 1.69rem;
      }
      .van-swipe__indicators {
        bottom: 30px;
      }
    }
    .search {
      position: absolute;
      top: 1.5rem;
      left: 0.15rem;
      width: 3.45rem;
      height: 0.44rem;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
      border-radius: 6px;
      .search_btn {
        background: linear-gradient(0deg, #f07f00, #ea5d3a, #f5885e);
        width: 0.5rem;
        color: #fff;
        border-radius: 5px;
      }
      .van-search__content {
        background: white;
      }
    }
  }
  .head_list {
    overflow: hidden;
    li {
      float: left;
      width: 25%;
      font-size: 0.11rem;
      text-align: center;
      margin-top: 0.43rem;
      img {
        width: 0.27rem;
        height: 0.27rem;
      }
      p {
        margin: 0.14rem 0;
      }
    }
  }
  .week_home {
    margin: 0.22rem 0.15rem;
    .week_head {
      overflow: hidden;
      .title {
        font-size: 0.15rem;
        font-weight: bold;
        color: #3a3b3a;
        float: left;
      }
      .subscribe {
        float: right;
        line-height: 0.25rem;
        color: #aaa;
      }
    }
    .home_swiper {
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      height: 1.6rem;
      margin: 0.25rem 0;
      .home_list {
        flex: 1;
        overflow: hidden;
        position: relative;
        img {
          width: 1.11rem;
          height: 0.85rem;
        }
        .state {
          position: absolute;
          top: 0;
          left: 0;
          // width: 0.52rem;
          // height: 0.16rem;
          padding: 0.05rem;
          border-radius: 10px 0px 10px 0px;
          text-align: center;
          line-height: 0.16rem;
          color: #fff;
          font-size: 0.1rem;
        }
        .soonGreen {
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
        }
        .soonRed {
          background: #d91615;
        }
        .home_name {
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 0.14rem;
          font-weight: bold;
          color: #343434;
        }
        .home_num {
          font-weight: bold;
          color: #666666;
          margin: 0.075rem 0;
        }
        .home_money {
          font-weight: bold;
          color: #f5653f;
          font-size: 0.13rem;
        }
      }
    }
  }
  .service_title {
    font-size: 0.15rem;
    font-weight: bold;
    color: #3a3a3a;
    padding-top: 0.15rem;
    margin: 0 0 0.17rem 0.16rem;
  }
  .service {
    background: url("~@/assets/img/yzsbg.png") center center no-repeat;

    .service_box {
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 0.2rem;
      .service_list {
        margin: 0.14rem 0;
        text-align: center;
        width: 0.75rem;
        background: #ffffff;
        border-radius: 6px;
        position: relative;
        padding-bottom: 10px;
        .list_num {
          position: absolute;
          width: 0.19rem;
          height: 0.19rem;
          line-height: 0.19rem;
          background: #f5643e;
          box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.05);
          border-radius: 50%;
          color: #fff;
          left: 40%;
          top: -10%;
        }
        .list-line {
          font-size: 0;
        }
        .list_img {
          margin-top: 0.2rem;
          height: 0.3rem;
        }
      }
    }
  }
  .loan {
    .loan_img {
      overflow: hidden;
      padding-left: 0.1rem;

      img {
        float: left;
        width: 1.06rem;
        height: 0.42rem;
        margin-right: 0.135rem;
        margin-bottom: 0.18rem;
      }
    }
  }
  .affairs {
    background: #f8f8f8;
    padding: 0.25rem 0;
    .affairs_box {
      width: 3.45rem;
      height: 0.7rem;
      margin: 0.2rem auto;
      background: #fff;

      .affairs_left {
        position: relative;
        top: -0.08rem;
        width: 0.68rem;
        margin: 0 0.15rem;
        height: 0.68rem;

        border-radius: 10px;
        text-align: center;
        float: left;
        color: #fff;
        font-weight: bold;
        .img_h {
          margin-top: 0.15rem;
          margin-bottom: 0.03rem;
          width: 0.2rem;
          height: 0.2rem;
        }
        .img_W {
          margin-top: 0.15rem;
          margin-bottom: 0.03rem;
          width: 0.32rem;
          height: 0.1rem;
        }
      }

      .affairs_color0 {
        background: linear-gradient(180deg, #ff5e5e, #fe6c6a);
      }
      .affairs_color1 {
        background: linear-gradient(0deg, #487aff, #7296ff);
      }
      .affairs_color2 {
        background: linear-gradient(0deg, #18d29c, #28e0bc);
      }
      .affairs_color3 {
        background: linear-gradient(0deg, #ffbe38, #ffd06c);
      }
      .affairs_color4 {
        background: linear-gradient(0deg, #258bec, #4da2ec);
      }
      .affairs_color5 {
        background: linear-gradient(0deg, #ef42a3, #f73ba4);
      }
      .affairs_right {
        color: #888888;
        line-height: 30px;
        margin-right: 0.1rem;
      }
    }
  }
  .course {
    .tab_conter {
      overflow: hidden;
      margin: 0.1rem 0;
      .card {
        float: left;
        width: 1.45rem;
        height: 0.65rem;
        background: #f6f6fc;
        border-radius: 10px;
        width: 38%;
        margin: 0.1rem;
        padding: 0.2rem 0.1rem;
        img {
          width: 0.15rem;
          height: 0.15rem;
          margin-right: 0.05rem;
          vertical-align: middle;
        }
        .title {
          font-size: 0.12rem;
          color: #28292b;
        }
        .conter {
          font-size: 0.1rem;
          color: #9a9a9a;
          margin-top: 0.1rem;
        }
      }
    }
  }
  .advert {
    width: 100%;
    padding-top: 0.2rem;
  }
  .purchase {
    overflow: hidden;
    margin: 0.23rem 0 0.21rem 0;
    .just {
      float: left;
      width: 0.92rem;
      height: 0.3rem;
    }
    .more {
      float: right;
      color: #9c9c9c;
      line-height: 24px;
      font-size: 0.12rem;
      margin-right: 0.17rem;
    }
  }
}
</style>
